/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/20 9:44 下午
 * @version V1.0
 */

import React from 'react';
import { connect, Link } from 'umi';
import styles from './index.less';
import { Button, Table } from 'antd';
import moment from 'moment';

const productCategoryList = ({ productCategoryList: { dataSource }, dispatch, loading }) => {
    const deleteCategory = (item) => {
        dispatch({
            type: 'productCategoryList/removeCategoryList',
            payload: {
                id: item._id,
            },
            callback: (result) => {
                if (result) {
                    dispatch({
                        type: 'productCategoryList/getPcategoryList',
                    });
                }
            },
        });
    };
    const columns = [
        {
            title: '分类',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <img style={{ width: '40px', height: '40px', borderRadius: '50%', marginRight: '10px' }}
                             src={item.icon} alt=""/>
                        {item.name}
                    </div>
                );
            },
        },
        {
            title: '创建时间',
            dataIndex: 'created_time',
            align: 'left',
            render: (created_time) => moment(created_time).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
            title: '修改时间',
            dataIndex: 'updated_time',
            align: 'left',
            render: (updated_time) => moment(updated_time).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        {
                            item.name === '云牧场' ? null : (
                                <Link to={{
                                    pathname: '/category-manage/p-category/edit',
                                    state: { fromDashboard: true },
                                    query: { id: item._id },
                                }} style={{ marginRight: '10px' }}>修改</Link>
                            )
                        }
                        <Button style={{ padding: 0 }} type="link" onClick={() => deleteCategory(item)}>删除</Button>
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerTable}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='_id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource}
                    pagination={false}
                />
                <Button
                    type="primary"
                    style={{ width: '100%', marginTop: '10px' }}
                >
                    <Link to={`/category-manage/p-category/add`}>新增</Link>
                </Button>
            </div>
        </div>
    );
};

export default connect(({ productCategoryList, dispatch, loading }) => ({
    productCategoryList,
    dispatch,
    loading: loading.effects['productCategoryList/getPcategoryList'],
}))(productCategoryList);
